<template>
    <section id="app">
<!-- 主体区域 -->
<TodoHeader @setName='add'></TodoHeader>
  <!-- 列表区域 -->
  <TodoMain :list='list' @setId='del'></TodoMain>
  <!-- 统计和清空 -->
 <TodoFooter :list='list' @clearList='cls' v-show="list.length>0"></TodoFooter>
</section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list'))||[
        {id:1,name:'吃饭'},
        {id:3,name:'睡觉'},
        {id:5,name:'打豆豆'}
      ]
    }
  },
  components:{
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  methods:{
    add(val){
      this.list.unshift({
        id:+new Date(),
        name:val
      })
    },
    del(vlu){
      this.list = this.list.filter(e=>e.id!==vlu)
    },
    cls(){
      this.list=[]
    }
  },
  watch:{
    list:{
      deep:true,
      handler(val){
        localStorage.setItem('list',JSON.stringify(val))
      }
    }
  },
}
</script>

<style>
</style>